import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Modal,
    Picker,
    Switch,
    TouchableHighlight,
    Text,
    View,
    ScrollView,
} from 'react-native';
class Button extends Component {
    state = {
        active: false,
    };
    _onHighlight = () => {
        this.setState({active: true});
    };
    _onUnhighlight = () => {
        this.setState({active: false});
    };
    render() {
        let colorStyle = {
            color: this.state.active ? '#fff' : '#000',
        };
        return (
            <TouchableHighlight
                onHideUnderlay={this._onUnhighlight}
                onPress={this.props.onPress}
                onShowUnderlay={this._onHighlight}
                style={[styles.button, this.props.style]}
                underlayColor="#a9d9d4">
                <Text style={colorStyle}>{this.props.children}</Text>
            </TouchableHighlight>
        );
    }
}
export default class ModalDemo extends Component {
    state = {
        animationType: 'none',
        modalVisible: false,
        transparent: false,
    };
    _setModalVisible = (visible) => {
        this.setState({modalVisible: visible});
    };
    _setAnimationType = (type) => {
        this.setState({animationType: type});
    };
    _toggleTransparent = () => {
        this.setState({transparent: !this.state.transparent});
    };
    render() {
        let modalBackgroundStyle = {
            backgroundColor: this.state.transparent ? 'rgba(0, 0, 0, 0.5)' : '#f5fcff',
        };
        let innerContainerTransparentStyle = this.state.transparent
            ? {backgroundColor: '#fff'}
            : null;
        let activeButtonStyle = {
            backgroundColor: '#ddd'
        };
        return (
            <View>
                <Modal
                    animationType={this.state.animationType}
                    transparent={this.state.transparent}
                    visible={this.state.modalVisible}
                    onRequestClose={() => this._setModalVisible(false)}>
                    <View style={[styles.container, modalBackgroundStyle, innerContainerTransparentStyle]}>
                        <Text>This modal was presented {this.state.animationType === 'none' ? 'without' : 'with'} animation.</Text>
                        <Button
                            onPress={this._setModalVisible.bind(this, false)}>
                            Close
                        </Button>
                    </View>
                </Modal>

                <ScrollView style={{height: 300}}>
                    <View>
                        <View style={styles.row}>
                            <Text style={{color:'grey',fontWeight: 'bold'}}>Transparent</Text>
                            <Switch value={this.state.transparent} onValueChange={this._toggleTransparent} />
                        </View>

                        <View style={styles.row}>
                            <Button onPress={this._setAnimationType.bind(this, 'none')} style={this.state.animationType === 'none' ? activeButtonStyle : {}}>
                                none
                            </Button>
                            <Button onPress={this._setAnimationType.bind(this, 'slide')} style={this.state.animationType === 'slide' ? activeButtonStyle : {}}>
                                slide
                            </Button>
                            <Button onPress={this._setAnimationType.bind(this, 'fade')} style={this.state.animationType === 'fade' ? activeButtonStyle : {}}>
                                fade
                            </Button>
                        </View>

                        <View style={styles.row}>
                            <Button onPress={this._setModalVisible.bind(this, true)}>
                                show
                            </Button>
                        </View>

                    </View>

                </ScrollView>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        borderRadius: 10,
        alignItems: 'center',
    },
    row: {
        flex: 1,
        justifyContent: 'space-around',
        flexDirection: 'row'
    },
    button: {
        borderRadius: 5,
        height: 44,
        justifyContent: 'center',
    },
});
AppRegistry.registerComponent('ModalDemo', () => ModalDemo);